<!--
 * @Author: PoJun
 * @Date: 2024-06-20 19:02:22
 * @LastEditors: PoJun
 * @LastEditTime: 2024-06-25 18:36:10
 * @Message: Nothing
-->
<template>
  <view class="qrCode" :style="[vuex_theme]">
    <uv-navbar
      title="二维码生成"
      :placeholder="true"
      titleWidth="auto"
      @leftClick="customNavbarBack"
    ></uv-navbar>
    <view class="qrCode-head uv-m-b-40">
      <uv-qrcode ref="qrcode" :value="qrValue" :options="options" :auto="false"></uv-qrcode>
    </view>
    <!-- 后续所有的demo相关配置都可以参考这里 -->
    <view class="uv-demo-block">
      <text class="uv-demo-block__title">内容设置</text>
      <view class="uv-demo-block__content">
        <uv-textarea
          v-model="value"
          @blur="inputBlur"
          :maxlength="-1"
          autoHeight
          placeholder="请输入内容"
        ></uv-textarea>
        <view class="qrCode-tip uv-m-t-16 uv-font-24">
          请注意:
          二维码包含的信息太长，导致二维码识别度太低扫不出来，建议文本二维码的文字数量不超过150字
        </view>
      </view>
    </view>
    <view class="uv-demo-block">
      <text class="uv-demo-block__title">边距</text>
      <view class="uv-demo-block__content">
        <uv-slider
          v-model="options.margin"
          :activeColor="vuex_theme['--theme-primary-color']"
          :max="50"
          :show-value="true"
          @change="remakeQrCode"
        ></uv-slider>
      </view>
    </view>
    <view class="uv-demo-block">
      <text class="uv-demo-block__title">内容美化</text>
      <view class="uv-demo-block__content qrCode--content">
        <view class="uv-demo-block">
          <text class="uv-demo-block__title">Logo</text>
          <view class="uv-demo-block__content">
            <uv-upload
              capture="album"
              :fileList="fileList"
              name="logo"
              width="40"
              height="40"
              :maxCount="1"
              @afterRead="afterRead"
              @delete="deletePic"
            ></uv-upload>
          </view>
        </view>
        <view class="uv-demo-block">
          <text class="uv-demo-block__title">前景色</text>
          <view class="uv-demo-block__content">
            <view
              class="qrCode--color"
              @tap="openPickColor('foregroundColor')"
              hover-class="uv-hover-class"
              :style="{ backgroundColor: options.foregroundColor }"
            ></view>
          </view>
        </view>
        <view class="uv-demo-block">
          <text class="uv-demo-block__title">背景色</text>
          <view class="uv-demo-block__content">
            <view
              @tap="openPickColor('backgroundColor')"
              class="qrCode--color"
              hover-class="uv-hover-class"
              :style="{ backgroundColor: options.backgroundColor }"
            ></view>
          </view>
        </view>
      </view>
    </view>
    <view class="uv-demo-block">
      <text class="uv-demo-block__title">下载</text>
      <view class="uv-demo-block__content">
        <view><uv-button text="保存二维码" type="primary" @click="saveQrCode"></uv-button></view>
      </view>
    </view>
    <!-- 颜色选择器 -->
    <uv-pick-color
      ref="pickerColor"
      :color="{ r: 0, g: 0, b: 0, a: 1 }"
      @confirm="confirm"
    ></uv-pick-color>
  </view>
</template>

<script>
import commonFuncMixin from "@/utils/commonFuncMixin.js"
export default {
  mixins: [commonFuncMixin],
  data() {
    return {
      value: "黑日小工具", //默认值
      qrValue: "黑日小工具",
      options: {
        useDynamicSize: false,
        errorCorrectLevel: "Q",
        margin: 10,
        foregroundColor: "rgba(0,0,0,1)", //前景色,
        backgroundColor: "rgba(255,255,255,1)", //背景色
        // 指定二维码前景，一般可在中间放logo
        foregroundImageSrc: ""
      },
      currentOpenType: "",
      fileList: []
    }
  },
  methods: {
    inputBlur() {
      this.qrValue = this.value
      this.remakeQrCode()
    },
    remakeQrCode() {
      this.$refs.qrcode.remake({
        success: () => {
          console.log("生成成功")
        },
        fail: err => {
          console.log(err)
        }
      })
    },
    openPickColor(type) {
      // 偷懒先不回显颜色吧
      this.currentOpenType = type
      this.$refs.pickerColor.open()
    },
    confirm({ hex }) {
      this.options[this.currentOpenType] = hex
      this.remakeQrCode()
    },
    // 删除图片
    deletePic(event) {
      this.fileList.splice(event.index, 1)
      this.options.foregroundImageSrc = ""
      this.remakeQrCode()
    },
    // 新增图片
    async afterRead({ file }) {
      this.fileList.push(file)
      this.options.foregroundImageSrc = file.url
      this.remakeQrCode()
    },
    saveQrCode() {
      this.$refs.qrcode.save({
        success: () => {
          uni.$uv.toast("已保存至本地")
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.qrCode {
  padding: 25rpx;
  &-head {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  &-tip {
    color: $uv-tips-color;
    line-height: 150%;
  }

  &--color {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    box-shadow: 0 0px 8px 1px rgba(0, 0, 0, 0.1);
  }
  &--content {
    display: flex;
    flex-direction: row;
  }
}
</style>
